<!-- 按钮鉴权的组件  -->

<template>
    <fieldset>
        <legend>{{ isLogin ? "内容界面" : "登入界面" }}</legend>


        <!-- 内容展示界面   因为v-if必须在v-else的上面-->
        <div class="content" v-if="isLogin">
            <!-- v-if用来设置一开始不显示这一块，等登陆成功后在显示这一块 -->
            <h1>列表展示</h1>
            <button @click="isLogin = false">点击退出登陆</button>
            <!-- 通过改变false的值来退出登陆界面 -->
            <button @click="getList">点击获取列表数据</button>
            <h2>
                <img width="50" src="userInfo.headimgurl" alt="">
                昵称：
                <a href="">{{ userInfo.nickname }}</a>
            </h2>
            <ul>
                <li v-for="item in lists" :key="item._id">
                    <!-- 遍历了服务器的数据，点击按钮后就能展示出来数据 -->
                    <b>{{ item.name }}</b>
                    <button v-has:read="permissionBtns">查看</button>
                    <!-- read是按钮对应后台的字段  permissionBtns这是-->
                    <button v-has:edit="permissionBtns">修改</button>
                    <button v-has:delete="permissionBtns">删除</button>
                    <button v-has:add="permissionBtns">增加</button>
                </li>

            </ul>
        </div>


        <!-- 登入界面 -->
        <div class="login" v-else>
            <h1>请登陆</h1>
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="username">
            <br>
            <label for="password">密码</label>
            <input type="text" v-model="password" @keydown.enter="login">
            <!-- v-model里面的值在下面data里面定义   @keydown.enter="login"绑定键盘事件enter-->
            <br>
            <button @click="login">登入</button>
            <!-- 事件在methods里面声明 -->
        </div>

    </fieldset>
</template>

<script>
//接口地址
//登入接口：http://chst.vip/users/login   
//请求方式：post
//参数username  password
//请求头：applicataion/json 
//lbw 555 admin


//需求：
//1.页面加载的时候展示登陆界面，登陆成功之后展示内容界面
//isLogin来控制是登陆界面还是内容界面
//2.登入成功的页面切换，登入失败的提示
//3.在登陆成功页面，根据todos数据，展示列表
//请求服务器的数据，需要携带token  token 令牌携令牌才能请求数据，这个令牌是有时效的
//请求的时候，携带在请求头里面， authorization（认证）
//令牌token可以存到sessionStorage中
//4.根据登入角色的权限，展示对应角色的按钮级权限

//因为点击登入后我们要登陆进去，所以我们先封装一个登陆的请求方法
const loginApi = (params = {}) => {//封装
    return fetch('http://chst.vip/users/login ', {
        method: 'post',//请求方式
        headers: {//请求头
            'content-type': 'application/json'
        },
        body: JSON.stringify(params)//携带的参数 (上载的参数就是传给服务器的参数)
    })
        .then(body => body.json())
        .catch(err => err.toString())
}

//获取列表的请求封装
const getListApi = () => {
    return fetch('http://chst.vip/students/getstulist?count=10', {
        headers: {//请求头
            'authorization': sessionStorage.getItem('user-token')
        }
    })
        .then(body => body.json())
        .catch(err => err.toString())//返回错误，将错误转为json
}



export default {//导出
    //声明全局的自定义指令，对按钮进行鉴权操作
    directives: {//声明局部自定义指令要加上s，
        has: {
            inserted(el, binding) {
                console.log(el)//el就是按钮
                console.log(binding)
                // el.disabled=true
                // disabled禁用按钮的意思
                //按钮需要的权限edit
                let role=binding.arg;//这个按钮需要的权限需要从指令参数里面获取

                //用户需要的权限
                let userRole=binding.value;//用户需要的权限从表达式里面获取
                //判断用户有没有按钮的权限
               let hasRole= userRole.includes(role)//看看用户权限里面包不包含role
               if(!hasRole){
                //没有权限，那么就禁用当前的按钮
                //1.禁用
                // el.disabled=true;//禁用按钮，但是按钮还是显示
                //2.直接不显示 就是直接移出按钮
                el.parentNode.removeChild(el)

               }
                
            }
        }
    },




    //获取列表
    data() {



        return {
            userInfo: {},//userInfo 用户信息
            username: "",
            password: "",
            isLogin: false,//用来控制是否登陆的状态
            lists: [],
            permissionBtns: []
        }

    },
    methods: {
        //登入
        async login() {
            //发起请求登陆进去 使用async和await来等待请求的异步结果
            let res = await loginApi({ username: this.username, password: this.password })
            console.log(res)

            if (res.state) {
                //登陆成功
                this.isLogin = true;//只要登陆成功就改变isLogin的值来展示内容界面
                this.userInfo = res.userInfo;//设置用户的信息 名字等
                sessionStorage.setItem('user-token', res.token)//将令牌放在
                this.permissionBtns = res.permission.buttons;//给permissionBtns赋值
                //直接获取列表
                this.getList()
            } else {
                alert(res.msg)
            }
        },
        //获取列表
        async getList() {
            let res = await getListApi()
            //判断是否请求成功
            if (res.state) {
                //请求成功
                this.lists = res.data //将data里面的空数组赋值上服务器请求到的数据
            } else {
                alert(res.mag)//获取数据失败 
            }

        }
    }
}
</script>


<style>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    border: 1px solid deeppink;
    margin: 20px;
    max-width: 500px;
}
</style>